<!--
 * @Author: qianduanxuyaochendian lxy_01@outlook.com
 * @Date: 2022-05-14 14:41:30
 * @LastEditors: qianduanxuyaochendian lxy_01@outlook.com
 * @LastEditTime: 2022-05-15 21:58:55
 * @FilePath: \job\web\src\views\register\components\CodeRegister.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <n-form
    ref="formRef"
    :model="formVal"
    :rules="rules"
    label-placement="left"
    label-width="auto"
  >
    <n-form-item path="loginname" label="用户名">
      <n-input
        v-model:value="formVal.loginname"
        placeholder="学号、工号 | 邮箱 "
      />
    </n-form-item>
    <n-form-item path="password" label="密码 ">
      <n-input
        v-model:value="formVal.password"
        placeholder="请输入密码"
        type="password"
        show-password-on="mousedown"
      />
    </n-form-item>
    <n-form-item path="realname" label="真实姓名">
      <n-input v-model:value="formVal.realname" placeholder="请输入真实姓名" />
    </n-form-item>
    <n-form-item label="用户角色" path="roleList">
      <n-select
        v-model:value="formVal.role"
        placeholder="请选择用户角色"
        :options="roleOptions"
      />
    </n-form-item>
    <n-form-item path="avatar" label="头像地址">
      <n-input v-model:value="formVal.avatar" placeholder="请输入头像地址" />
    </n-form-item>
    <n-form-item path="phone" label="联系方式">
      <n-input v-model:value="formVal.phone" placeholder="请输入联系方式" />
    </n-form-item>
    <n-form-item path="email" label="邮箱">
      <n-auto-complete
        v-model:value="formVal.email"
        :input-props="{
          autocomplete: 'disabled',
        }"
        :options="options"
        placeholder="邮箱"
      />
    </n-form-item>
    <n-form-item label="性别" path="sexList">
      <n-select
        v-model:value="formVal.sex"
        placeholder="请选择用户性别"
        :options="sexOptions"
      />
    </n-form-item>
  </n-form>
  <div class="button-group">
    <n-button type="primary" @click="handleRegister" block round
      >确 定</n-button
    >
    <n-button block round @click="handleBack">返回</n-button>
  </div>
</template>

<script setup>
// 引入reactive用于定义响应式变量
import { ref, reactive, computed, onMounted, toRaw } from "vue"
// 按需引入请求接口
import { RegisterAPI } from "@/http/api/register.js"

// 导入路由
import { useRouter } from "vue-router"
const router = useRouter()

const valueRef = ref("")
// 登录框表单数据
const formVal = reactive({
  loginname: "",
  password: "",
  realname: "",
  role: "",
  avatar: "",
  phone: "",
  email: toRaw(valueRef),
  sex: "",
})
// 实现邮箱自动填充
const options = computed(() => {
  return [
    "@gmail.com",
    "@163.com",
    "@qq.com",
    "@hotmail.com",
    "@outlook.com",
  ].map((suffix) => {
    const prefix = valueRef.value.split("@")[0]
    return {
      label: prefix + suffix,
      value: prefix + suffix,
    }
  })
})

// 角色列表
const roleList = reactive([
  { label: "学生", value: "0" },
  { label: "老师", value: "1" },
  { label: "企业负责人", value: "2" },
  { label: "超级管理员", value: "3" },
])
// 性别列表
const sexList = reactive([
  { label: "保密", value: "0" },
  { label: "男", value: "1" },
  { label: "女", value: "2" },
])

// 处理表单属性
const roleOptions = computed(() => {
  return roleList.map((v) => ({
    label: v.label,
    value: v.value,
  }))
})

const sexOptions = computed(() => {
  return sexList.map((v) => ({
    label: v.label,
    value: v.value,
  }))
})
// 验证规则
const rules = reactive({
  loginname: {
    required: true,
    trigger: "blur",
    message: "学号、工号 | 邮箱",
  },
  password: {
    required: true,
    trigger: "blur",
    message: "请输入密码",
  },
  realname: {
    required: true,
    trigger: "blur",
    message: "请输入真实姓名",
  },
  role: {
    required: true,
    trigger: "blur",
    message: "请输入选择角色",
  },
  avatar: {
    required: true,
    trigger: "blur",
    message: "请输入头像地址",
  },
  phone: {
    required: true,
    trigger: "blur",
    message: "请输入手机号",
  },
  email: {
    required: true,
    trigger: "blur",
    message: "请输入邮箱",
  },
  sex: {
    required: true,
    trigger: "blur",
    message: "请选择性别",
  },
})

// 处理登录
function handleRegister() {
  RegisterAPI(formVal)
    .then((res) => {
      window.$message.success("注册成功")
      router.push("/login")
    })
    .catch((err) => {})
  // console.log(formVal)
}

// 返回登录页
const handleBack = () => {
  router.push("/login")
}
</script>

<style lang="scss" scoped>
.button-group {
  margin-left: 18%;
  width: 80%;
  height: 90px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-content: center;
}
</style>
